<template>
  <div class="lunar-calendar">
    <div class="lunar-date-line">
      <span>{{ lunarData.lunar }}</span>
      <span v-if="lunarData.ganzhi">{{ lunarData.ganzhi }}</span>
    </div>
    <div class="lunar-fortune-line sm-hidden" v-if="lunarData.yi || lunarData.ji">
      <span v-if="lunarData.yi">{{ lunarData.yi }}</span>
      <span v-if="lunarData.ji">{{ lunarData.ji }}</span>
    </div>
  </div>
</template>

<script setup>
import { Lunar, Solar } from 'lunar-javascript';

// 农历数据
const lunarData = reactive({
  lunar: '农历加载中...', // 农历日期
  ganzhi: '', // 干支纪年
  yi: '', // 宜
  ji: '', // 忌
});

// 获取农历数据
const getLunarData = () => {
  try {
    const now = new Date();
    const year = now.getFullYear();
    const month = now.getMonth() + 1;
    const day = now.getDate();
    
    console.log('当前日期:', year, month, day);
    
    // 创建阳历日期对象
    const solar = Solar.fromYmd(year, month, day);
    const lunar = solar.getLunar();
    
    console.log('Solar:', solar.toString());
    console.log('Lunar:', lunar.toString());
    
    // 获取农历日期
    const lunarYear = lunar.getYear();
    const lunarMonth = lunar.getMonth();
    const lunarDay = lunar.getDay();
    const lunarMonthChinese = lunar.getMonthInChinese();
    const lunarDayChinese = lunar.getDayInChinese();
    
    // 获取干支
    const yearGanZhi = lunar.getYearInGanZhi();
    const dayGanZhi = lunar.getDayInGanZhi();
    
    // 获取黄历宜忌
    const yiList = lunar.getDayYi();
    const jiList = lunar.getDayJi();
    
    console.log('农历年月日:', lunarYear, lunarMonth, lunarDay);
    console.log('农历中文:', lunarMonthChinese, lunarDayChinese);
    console.log('干支:', yearGanZhi, dayGanZhi);
    console.log('宜:', yiList);
    console.log('忌:', jiList);
    
    // 更新数据 - 显示完整农历日期
    lunarData.lunar = lunar.toString();
    lunarData.ganzhi = `${yearGanZhi} 年 ${dayGanZhi}日 `;
    
    // 处理宜忌数据
    if (Array.isArray(yiList) && yiList.length > 0) {
      lunarData.yi = `宜: ${yiList.slice(0, 3).join(' ')}`;
    } else {
      lunarData.yi = '宜: 诸事不宜';
    }
    
    if (Array.isArray(jiList) && jiList.length > 0) {
      lunarData.ji = `忌: ${jiList.slice(0, 3).join(' ')}`;
    } else {
      lunarData.ji = '忌: 无特别禁忌';
    }
    
    console.log('最终显示数据:', {
      lunar: lunarData.lunar,
      ganzhi: lunarData.ganzhi,
      yi: lunarData.yi,
      ji: lunarData.ji
    });
    
  } catch (error) {
    console.error('农历数据获取失败:', error);
    console.error('错误详情:', error.message, error.stack);
    
    // 提供默认数据
    lunarData.lunar = '农历数据获取失败';
    lunarData.ganzhi = '请刷新重试';
    lunarData.yi = '宜: 查看黄历';
    lunarData.ji = '忌: 无';
  }
};

let updateInterval = null;

// 组件挂载时获取数据
onMounted(() => {
  console.log('LunarCalendar 组件已挂载，开始获取农历数据');
  getLunarData();
  
  // 每小时更新一次数据（用于测试）
  updateInterval = setInterval(() => {
    console.log('定时更新农历数据');
    getLunarData();
  }, 60 * 60 * 1000); // 1小时
});

// 组件卸载时清除定时器
onUnmounted(() => {
  if (updateInterval) {
    clearInterval(updateInterval);
    updateInterval = null;
  }
});
</script>

<style lang="scss" scoped>
.lunar-calendar {
  font-size: 0.95rem;
  color: var(--main-text-color);
  text-align: center;
  
  .lunar-date-line {
    margin-bottom: 4px;
    
    span {
      display: inline-block;
      margin-right: 8px;
      
      &:last-child {
        margin-right: 0;
      }
    }
  }
  
  .lunar-fortune-line {
    font-size: 0.85rem;
    
    span {
      display: inline-block;
      margin-right: 12px;
      
      &:last-child {
        margin-right: 0;
      }
    }
  }
  
  @media (max-width: 768px) {
    .sm-hidden {
      display: none;
    }
  }
}
</style>